[#assign title]余额充值[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
    .recharge p {
        margin: 0px;
        font-size: 1.25rem;
        padding: 2px 0;
    }

    .recharge .text-money {
        color: yellow;
    }

    @media (max-width: 320px) {
        .recharge p {
            font-size: 1rem;
        }
    }
</style>
[/#macro]
[#macro body]
    <div class="row">
        <div class="col-12 p-0">
            <mt-cell is-link to="/order/recharge/index">
                <template slot="title">
                    当前金豆:<span class="text-danger">{{customer.balance | formatDecimal}}</span>
                </template>
                充值记录
            </mt-cell>
        </div>
    </div>
    <div class="recharge">
        <form hidden action="/payment/submit" method="post">
            <input name="CSRF_TOKEN" value="${CSRF_TOKEN}"/>
            <input name="type" value="RECHARGE"/>
            <input name="orderSn" :value="orderSn"/>
            <input name="paymentPluginId" :value="selectedPaymentId"/>
        </form>
        <div class="row no-gutters">
            <div class="col-4 rounded px-1 py-2" v-for="(recharge, index) in rechargeList">
                <div class="btn btn-block p-0"
                     :class="[recharge.selected?'btn-danger border-danger':'border']"
                     @click="changeRecharge(recharge)">
                    <p>{{recharge.money}} 金豆</p>
                    <p class="small">
                        再送
                        <span :class="[recharge.selected?'text-money':'text-success']">{{recharge.rewardMoney}}</span>
                        金豆
                    </p>
                    <span>￥{{recharge.price}}</span>
                </div>
            </div>
        </div>
    </div>
<div class="row">
    <div class="col-12">请选择支付方式</div>
</div>
<div class="pre-scrollable" :style="{'max-height': paymentPluginHeight}">
    <mt-radio v-model="selectedPaymentId" :options="paymentPluginList"></mt-radio>
</div>
<footer class="fixed-bottom">
    <mt-cell>
        <template slot="title">
            支付
            <span class="text-danger">{{selectedRecharge.price}}</span>
            元获得
            <span class="text-danger">{{(selectedRecharge.money || 0) + (selectedRecharge.rewardMoney || 0)}}</span>
            金豆
        </template>
        <button type="button" class="btn btn-primary btn-block" slot @click="pay">立即支付</button>
    </mt-cell>
</footer>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            customer: {
                balance: 0.00
            },
            orderSn: '',
            rechargeList: [],
            selectedRecharge: {
                price: 0,
                money: 0,
                selected: false
            },
            paymentPluginList: [],
            selectedPaymentId: '',
            paymentPluginHeight: '0px'
        },
        methods: {
            /** 计算支付方式面板高度 */
            calcPaymentPluginHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.paymentPluginHeight = vm.calcScrollHeight('.pre-scrollable') + 'px';
                });
            },
            /** 变更充值金额 */
            changeRecharge: function (recharge) {
                return this.selectedRecharge = recharge;
            },
            /** 立即支付 */
            pay: function () {
                var vm = this;
                if (!vm.selectedRecharge.id) {
                    return vm.$toast('请选择充值金额');
                }
                if (!vm.selectedPaymentId) {
                    return vm.$toast('请选择支付方式');
                }
                vm.$indicator.open({
                    text: '请稍候...',
                    spinnerType: 'fading-circle'
                });
                var reqData = vm.paramsSerializer({rechargeConfigId: vm.selectedRecharge.id});
                axios.post("/order/recharge/create", reqData).then(function (response) {
                    var data = response.data;
                    if (!data.success) {
                        vm.$indicator.close();
                        return vm.$toast(data.message || '支付失败,请稍候重试');
                    }
                    vm.orderSn = data.data;
                    vm.$nextTick(function () {
                        document.querySelector('form').submit();
                    });
                });
            }
        },
        computed: {},
        watch: {
            selectedRecharge: function (val) {
                var rechargeList = this.rechargeList;
                for (var index = 0; index < rechargeList.length; index++) {
                    var recharge = rechargeList[index];
                    recharge.selected = recharge == val;
                }
            }
        },
        mounted: function () {
            var vm = this;
            axios.post('/customer/detail').then(function (response) {
                vm.customer = response.data;
            });
            axios.post('/recharge/config').then(function (response) {
                var rechargeList = response.data;
                var selectedRecharge = {};
                for (var index = 0; index < rechargeList.length; index++) {
                    var recharge = rechargeList[index];
                    if (recharge.isDefault) {
                        recharge.selected = recharge.isDefault;
                        selectedRecharge = recharge;
                        break;
                    }
                }
                vm.rechargeList = rechargeList;
                vm.selectedRecharge = selectedRecharge;
                vm.calcPaymentPluginHeight();
            });
            axios.post('/recharge/plugin').then(function (response) {
                var pluginList = response.data;
                vm.paymentPluginList = pluginList;
                if (pluginList && pluginList.length > 0) {
                    vm.selectedPaymentId = pluginList[0].value;
                }
            });
        }
    });
</script>
[/#macro]